<template>
  <div class="home">
    <Row :gutter="10" style="margin-bottom: 20px">
      <i-col span="6">
        <div class="card-item" @click="gotoUserManage">
          <Card>
            <p slot="title">累计用户数</p>
            <ICountUp
              class="count-style"
              useGrouping
              :delay="1000"
              :endVal="nums.user"
            />
          </Card>
        </div>
      </i-col>
      <i-col span="6">
        <div class="card-item" @click="gotoBookManage">
          <Card>
            <p slot="title">总书籍数</p>
            <ICountUp
              class="count-style"
              useGrouping
              :delay="1000"
              :endVal="nums.book"
            />
          </Card>
        </div>
      </i-col>
      <i-col span="6">
        <div class="card-item" @click="gotoCommentManage">
          <Card>
            <p slot="title">总评论数</p>
            <ICountUp
              class="count-style"
              useGrouping
              :delay="1000"
              :endVal="nums.comment"
            />
          </Card>
        </div>
      </i-col>
      <i-col span="6">
        <Card>
          <p slot="title">盈利额</p>
          <ICountUp
            class="count-style"
            useGrouping
            :delay="1000"
            :endVal="nums.money"
          />
        </Card>
      </i-col>
    </Row>
    <Card>
      <p slot="title">订单数与销售额</p>
      <p>
        <ve-histogram
          :data="cChart.data"
          :settings="cChart.settings"
          :extend="chartExtend"
        />
      </p>
    </Card>
  </div>
</template>

<script>
import { VeHistogram } from 'v-charts';
import ICountUp from 'vue-countup-v2';
import http from '@/utils/http';

export default {
  components: {
    VeHistogram,
    ICountUp,
  },
  data() {
    this.chartExtend = {
      series(v) {
        v.forEach((i) => {
          i.barWidth = 30;
        });
        return v;
      },
    };
    return {
      nums: {
        book: 0,
        user: 0,
        comment: 0,
        money: 0,
      },
      cChart: {
        settings: {
          metrics: ['订单数', '销售额'],
          dimension: ['日期'],
        },
        data: {
          columns: ['日期', '订单数', '销售额'],
          rows: [
            {
              日期: '2019-03-11',
              订单数: 101,
              销售额: 1093,
            },
            {
              日期: '2019-03-12',
              订单数: 93,
              销售额: 955,
            },
            {
              日期: '2019-03-13',
              订单数: 133,
              销售额: 1093,
            },
            {
              日期: '2019-03-14',
              订单数: 101,
              销售额: 1093,
            },
            {
              日期: '2019-03-15',
              订单数: 203,
              销售额: 1993,
            },
            {
              日期: '2019-03-16',
              订单数: 183,
              销售额: 1593,
            },
            {
              日期: '2019-03-17',
              订单数: 101,
              销售额: 1093,
            },
            {
              日期: '2019-03-18',
              订单数: 101,
              销售额: 1093,
            },
            {
              日期: '2019-03-19',
              订单数: 203,
              销售额: 2193,
            },
            {
              日期: '2019-03-20',
              订单数: 193,
              销售额: 1393,
            },
          ],
        },
      },
    };
  },

  created() {
    this.getNumStatData();
    this.timer = setInterval(() => {
      this.getNumStatData();
    }, 10 * 60 * 1000);
  },

  methods: {
    getNumStatData() {
      http({
        method: 'GET',
        url: '/api/admin/stat/nums',
        operation: '获取统计数据',
      }).then((res) => {
        const { book = 0, user = 0, comment = 0, money = 0 } = res.data;
        this.nums = { book, user, comment, money };
      });
    },

    gotoUserManage() {
      this.$router.push({
        path: '/user-manage/list',
      });
    },

    gotoBookManage() {
      this.$router.push({
        path: '/book-manage/list',
      });
    },

    gotoCommentManage() {
      this.$router.push({
        path: '/comment-manage',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  .count-style {
    font-size: 40px;
  }

  .card-item {
    cursor: pointer;
  }
}
</style>
